<template>
	<view class="box">
		<view style="margin-top: 20vh;" v-if="!list[0]">
			<u-empty mode="list"></u-empty>
		</view>
		<view class="boxItem" v-for="item in list" :key="item.id">
			<view class="flex flex-itemCenter">
				<image src="../../static/totalPoints.png" style="width: 50rpx;height: 60rpx;margin-right: 30rpx;">
				</image>
				<view>
					<view class="flex flex-itemCenter">
						<view class="name">文件名：</view>
						<view class="value nowrap">{{item.annexName}}</view>
					</view>
					<view class="flex flex-itemCenter">
						<view class="name">文件大小：</view>
						<view class="value nowrap">{{sizeTostr(item.annexSize)}}</view>
					</view>
				</view>
			</view>
			<view class="cob" @click="preview(item)">预览</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					classify: '',
					connectId: ''
				},
				list: [],
				flag: true
			}
		},
		onLoad(e) {
			if (e.classify) {
				this.params.classify = e.classify
			}
			if (e.connectId) {
				this.params.connectId = e.connectId
			}
		},
		onShow() {
			this.requestList()
		},
		methods: {
			async requestList() {
				let {
					resultValue: res
				} = await this.request(this.$api.attachment, this.params, 'POST')
				if (res) {
					this.list = res
				}
			},
			//文件预览
			preview(e) {
				let that = this
				if (this.flag) {
					uni.showLoading({
						title: '文件加载中'
					})
					uni.downloadFile({
						url: e.annexUrl,
						success: function(res) {
							let fileType = that.whatFileType(e.annexName)
							if (fileType == "png" || fileType == "jpg" || fileType == "jpeg") {
								// 图片的话直接预览
								uni.previewImage({
									urls: [res.tempFilePath]
								});
								uni.hideLoading();
							} else {
								var filePath = res.tempFilePath;
								uni.openDocument({
									filePath: filePath,
									fileType:fileType,
									showMenu: true,
									success: function(res) {
										console.log('打开文档成功',res);
										uni.hideLoading();
									},
									fail: function(error) {
										console.log("打开本地文件失败",error)
										uni.hideLoading();
										uni.showToast({
											icon:'error',
											title:'预览失败'
										})
									}
								});
							}
						}
					});
					this.flag = false
					setTimeout(() => {
						this.flag = true
					}, 2000)
				}
			},
			// 获取文件类型
			whatFileType(file_url) {
				console.log(file_url)
				var index = file_url.lastIndexOf(".");
				return file_url.substr(index + 1);;
			},
			//文件大小
			sizeTostr(size) {
				var data = "";
				if (size < 0.1 * 1024) { //如果小于0.1KB转化成B  
					data = size.toFixed(2) + "B";
				} else if (size < 0.1 * 1024 * 1024) { //如果小于0.1MB转化成KB  
					data = (size / 1024).toFixed(2) + "KB";
				} else if (size < 0.1 * 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB  
					data = (size / (1024 * 1024)).toFixed(2) + "MB";
				} else { //其他转化成GB  
					data = (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
				}
				var sizestr = data + "";
				var len = sizestr.indexOf("\.");
				var dec = sizestr.substr(len + 1, 2);
				if (dec == "00") { //当小数点后为00时 去掉小数部分  
					return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
				}
				return sizestr;
			}
		}
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background-color: #F1F2F5;
		padding: 15rpx 15rpx
	}

	.boxItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 16rpx;
		margin-bottom: 15rpx;
	}

	.name {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;
		padding-right: 10rpx;
	}

	.value {
		width: 300rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.cob {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3473F9;
	}
</style>
